<script setup lang="ts">
import { ref, onMounted } from 'vue';
import ModuleTitle from './moduleTitle.vue';
import ModuleFirst from './moduleFirst.vue';
import moduleSecond from './moduleSecond.vue';
import moduleThird from './moduleThird.vue';
import moduleFourth from './moduleFourth.vue';
let screen = ref();
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
});
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};
</script>
<template>
  <div class="container" ref="screen">
    <!-- 头部  -->
    <ModuleTitle />
    <div class="main">
      <ModuleFirst />
      <moduleSecond />
      <moduleThird />
      <moduleFourth />
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  position: fixed;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: left top;
}
</style>
